<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>
<!-- v-big类似v-text。但数值放大十倍-->
<!-- v-fbind类似 v-bind 但是会自动聚焦-->
<body>
    <div id="root">
        <h2>当前n:<span v-text="n"></span></h2>
        <h2>放大十倍<span v-big="n"></span></h2>
        <h2>aaa<span v-big-number="n"></span></h2>
        <button @click="n++">n++</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{//this都是window，也可以写全局directives，方法同filter
            //big什么时候被调用，与元素成功绑定（第一次）；指令所在的模板被重新解析（vue的属性改变）
            big(element,binding){//简写版，代表bind\update
                //element代表所在的html结构dom（span）binding代表这个函数绑定的数据
                element.innerText=binding.value*10
            },
            // fbind(element,binding){
            //     element.value=binding.value
            //     element.focus()
            // }
            //无法直接写focus，因为元素要先在body里面才能focus，但由于vue没有解析完，就调用该函数，会导致元素还没在Body里面,使用完整版
            fbind:{
                //指令和元素成功绑定时
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入页面是调用
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板被重新解析
                update(element,binding){
                    element.value=binding.value
                    element.focus()
                }
            },
            'big-number':{

            }//要使用-来命名而不是驼峰，中间有-，要用‘’来定义
        }
    })
    </script> 
</body>
</html>